<template>
    <div style="margin-top: 40px">
        <!--<el-button @click="addArticle()">添加文章</el-button>-->
        <div class="articles-area">
            <el-card style="text-align: left">
                <div v-for="article in articles" :key="article.id">
                    <div style="float:left;width:85%;height: 150px;">
                        <router-link class="article-link" :to="{path:'/jotter/article',query:{id: article.id}}"><span
                                style="font-size: 20px"><strong>{{ article.articleTitle }}</strong></span></router-link>
                        <el-divider content-position="left">{{ article.articleDate }}</el-divider>
                        <router-link class="article-link" :to="{path:'/jotter/article',query:{id: article.id}}"><p>
                            {{ article.articleAbstract }}</p></router-link>
                    </div>
                    <el-image
                            style="margin:18px 0 0 30px;width:100px;height: 100px"
                            :src="article.articleCover"
                            fit="cover"></el-image>
                    <el-divider></el-divider>
                </div>
            </el-card>
        </div>
        <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>

    import {getCurrentInstance, onMounted, reactive, toRefs} from "vue";

    export default {
        name: 'Articles',
        setup() {
            const data = reactive({
                articles: [],
                pageSize: 4,
                total: 0
            })

            let {proxy} = getCurrentInstance()

            onMounted(() => {
                loadArticles()
            })


            function loadArticles() {
                proxy.$axios.get('/article/' + data.pageSize + '/1').then(resp => {
                    if (resp && resp.data.code === 200) {
                        data.articles = resp.data.result.content
                        data.total = resp.data.result.totalElements
                    }
                })
            }

            function handleCurrentChange(page) {
                proxy.$axios.get('/article/' + data.pageSize + '/' + page).then(resp => {
                    if (resp && resp.data.code === 200) {
                        data.articles = resp.data.result.content
                        data.total = resp.data.result.totalElements
                    }
                })
            }

            return {
                ...toRefs(data),
                handleCurrentChange,
                onMounted,
                loadArticles
            }
        }


    }
</script>

<style scoped>
    .articles-area {
        width: 990px;
        height: 750px;
        margin-left: auto;
        margin-right: auto;
    }

    .article-link {
        text-decoration: none;
        color: #606266;
    }

    .article-link:hover {
        color: #409EFF;
    }
</style>
